import React, { Component } from 'react'

export default class Count extends Component {

    state= {count:0}

    increment = () => {
        const {value} = this.countNum;
        const {count} = this.state;
        this.setState({count:value*1 + count})
    }

    decrement = () => {
        const {value} = this.countNum;
        this.setState({count:this.state.count - value*1})
    }

    incrementIfOdd = () => {
        const {value} = this.countNum;
        if(this.state.count % 2 === 1){
        this.setState({count:value*1 + this.state.count})
    }
    }

    incrementAsync = () => {
        const {value} = this.countNum;
        setTimeout(()=>{
            this.setState({count:value*1 + this.state.count})
        },500);
    }

    render() {
        return (
            <div>
                <h2>总数为： {this.state.count}</h2>
                <select ref={a => this.countNum = a}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>add if odd</button>&nbsp;
                <button onClick={this.incrementAsync}>add async</button>&nbsp;
            </div>
        )
    }
}